<template>
  <div class="user-table">
    <el-table :data="userlistData" :header-cell-style="{ background: '#fafafa' }" row-key="id">
      <el-table-column label="姓名">
        <template #default="{ row }">
          <div class="user-info-warp">
            <header class="info-title">
              <el-avatar
                :size="30"
                :src="
                  row.avatar
                    ? row.avatar
                    : 'https://openim-1309784708.cos.ap-shanghai.myqcloud.com/4ce4fccbca32722fdd9d41acb48ef409.jpg'
                "
              ></el-avatar>
              <p>{{ row.name }}</p>
            </header>
            <footer class="info-footer">{{ row.department_name }}</footer>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="completed_issues" label="解决问题总数" width="150px">
        <template #default="{ row }">
          <div class="solved-num">{{ getCompletedNum(row.solve_problem) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="被点赞总数" width="100px">
        <template #default="{ row }">
          <div class="liked-num">{{ getLikedNum(row?.issue_connect) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="创建总数" width="100px">
        <template #default="{ row }">
          <div class="created-num">{{ row?.issue_connect ? row?.issue_connect?.length : 0 }}</div>
        </template>
      </el-table-column>
      <el-table-column type="index" label="排名" width="100px">
        <template #default="scope">
          <div class="top">
            <p>{{ scope.$index + 1 }}</p>
            <svg aria-hidden="true" class="top-color-icon">
              <use v-if="scope.$index === 0" xlink:href="#icon-huoyanjiare-copy" />
              <use v-if="scope.$index === 1" xlink:href="#icon-huoyanjiare1" />
              <use v-if="scope.$index === 2" xlink:href="#icon-huoyanjiare" />
            </svg>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted } from 'vue'

import { userStore } from '@/store/user'
import { storeToRefs } from 'pinia'
import { IProblems } from '../../config/problems'
const userData = userStore()
const { userlistData } = storeToRefs(userData)

/**
 * @desc: 获取点赞总数
 * @return {*}
 */
const getLikedNum = computed(() => (res: IProblems[]) => {
  let num = 0
  res?.map((item: IProblems) => {
    if (item?.issue_like?.length) {
      num += item?.issue_like?.length
    }
  })
  return num
})

/**
 * @desc: 获取已完成问题是数量
 * @return {*}
 */
const getCompletedNum = computed(() => (res: IProblems[]) => {
  let num = 0
  res?.map((item: IProblems) => {
    if (item.is_status === '已完成') num++
  })
  return num
})
</script>

<style lang="less" scoped>
.user-table {
  border: 1px solid rgb(235, 235, 235);
  border-radius: 4px;
  padding: 20px;
  .user-info-warp {
    .info-title {
      display: flex;
      align-items: center;
      padding-bottom: 3px;
      p {
        padding-left: 5px;
      }
    }
  }
  .solved-num,
  .liked-num,
  .created-num,
  .top {
    font-size: 16px;
  }
  .solved-num {
    color: #fe7a15;
  }
  .liked-num {
    color: #fe7a15;
  }
  .created-num {
    color: #fe7a15;
  }
  .top {
    display: flex;
    align-items: center;
    color: rgba(242, 86, 86, 0.872);
    .top-color-icon {
      width: 30px;
      height: 30px;
      padding-left: 5px;
    }
  }
}
</style>
